.tasks-modal {
    section + section {
            // Put some space when sections are one next to another
            margin-top: 6px;
    }

    hr {
        margin: 6px 0;
    }

    .tasks-modal-error {
        border: 1px solid red !important;
    }

    .accesskey {
        text-decoration: underline;
        text-underline-offset: 1pt;
    }
}

.tasks-modal-description-section {
    textarea {
        width: 100%;
        min-height: calc(var(--input-height) * 2);
        resize: vertical;
        margin-top: 8px;
    }
}

.tasks-modal-priority-section {
    display: grid;
    grid-template-columns: 6em auto auto auto;
    grid-row-gap: 0.15em;

    > label {
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .task-modal-priority-option-container {
        white-space: nowrap;

        input + label {
            font-size: var(--font-ui-small);
            border-radius: var(--input-radius);
            padding: 2px 3px;
        }

        input {
            accent-color: var(--interactive-accent);
        }

        input:focus + label {
            box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
            border-color: var(--background-modifier-border-focus);
        }

        input:checked + label {
            font-weight: bold;
        }

        input:not(:checked) + label > span:nth-child(4) {
            filter: grayscale(100%) opacity(60%);
        }
    }
}

.tasks-modal-dates-section {
    display: grid;
    grid-template-columns: 6.0em 13em auto;
    column-gap: .5em;
    row-gap: 5px;
    align-items: center;

    label {
        grid-column: 1;
    }

    .tasks-modal-date-input {
        min-width: 15em;
    }

    .tasks-modal-date-editor-picker {
        margin-left: .5em;
    }

    .tasks-modal-parsed-date {
        grid-column: 3;
        font-size: var(--font-ui-small);
    }

    .future-dates-only {
        grid-column-start: 1;
        grid-column-end: 3;

        input {
            margin-left: 0.67em;
            top: 2px;
        }
    }

    .status-editor-status-selector {
        grid-column: 2;
    }
}

.tasks-modal-dependencies-section {
    display: grid;
    grid-template-columns: 6.0em auto;
    column-gap: 0.5em;
    row-gap: 5px;
    align-items: center;

    .tasks-modal-dependency-input {
        grid-column: 2;
        width: 100%;
    }

    .results-dependency {
        grid-column: 2;
    }
}

.tasks-modal-button-section {
    position: sticky;
    bottom: 0;
    background-color: var(--modal-background);
    padding-bottom: 16px;
    padding-top: 16px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: .5em;

    button:disabled {
        pointer-events: none !important;
        opacity: 0.3 !important;
    }
}

@media (max-width: 649px) {
    .tasks-modal-priority-section {
        grid-template-columns: 6em auto auto;

        > label {
            grid-row: 1 / span 3;
        }
    }
}

@media (max-width: 499px) {
    .tasks-modal-priority-section {
        grid-template-columns: 4em auto auto;
    }

    .tasks-modal-dates-section {
        grid-template-columns: 1fr;
        grid-auto-columns: auto;

        .tasks-modal-date-input {
            grid-column: 1;
        }

        .tasks-modal-parsed-date {
            grid-column: 2;
        }

        .status-editor-status-selector {
            grid-column: 1;
        }
    }

    .tasks-modal-dependencies-section {
        label {
            grid-column: 1;
        }

        .results-dependency {
            grid-column: 1;
        }
    }
}

@media (max-width: 399px) {
    .tasks-modal-dates-section {
        .status-editor-status-selector {
            grid-column: 1;
        }

        > .tasks-modal-parsed-date {
            grid-column: 1;
        }
    }

    .tasks-modal-priority-section {
        grid-template-columns: 4em auto;

        > label {
            grid-row: 1 / span 6;
        }
    }

    .tasks-modal-dependencies-section {
        grid-template-columns: 1fr;
        grid-auto-columns: auto;
    }
}

@media (max-width: 259px) {
    .tasks-modal-priority-section {
        grid-template-columns: 1fr;

        > label {
            grid-row: 1;
        }
    }
}
